<!--
@function: 这是一个简单的面板
@author:HYS
@description:
1.描述
    带工具条，标题，通过slot给工具条和主体添加内容

2.设置
    panelTitle:String 面板标题
    hasToolbar:Boolean 是否有顶部工具栏位置
    hasFooter:Boolean 是否有底部工具条
    hasTitle:Boolean 默认为true，是否具有标题

@modify:ZY 2018-08-21
修改内容：添加了footer插槽
@modify:胡杨升 2018年10月31日
修改内容：添加了标题显示与否
-->
<template>
<el-container class="simple-panel-container">
  <el-header height="40px" class="header" v-if="hasTitle">
    <el-row type="flex" justify="start">
      <span class="title">{{panelTitle}}</span>
    </el-row>
  </el-header>
  <el-header v-if="hasToolbar" height="40px" class="toolbar">
    <el-row type="flex" justify="start">
      <slot name="toolbar"></slot>
    </el-row>
  </el-header>
  <el-main class="main">
    <slot name="main"></slot>
  </el-main>
  <el-footer class="footer" height="40px" v-if="hasFooter">
    <slot name="footer"></slot>
  </el-footer>
</el-container>
</template>
<script>
export default {
  name: "simple-panel",
  props: {
    panelTitle: {
      type: String,
      default: ""
    },
    hasTitle:{
      type:Boolean,
      default:true
    },
    hasToolbar: {
      type: Boolean,
      default: false
    },
    hasFooter: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    };
  }
}
</script>
<style lang="scss">
@import "../../assets/scss/basic.scss";

.simple-panel-container {
    height:100%;// 2018-06-11
    margin: 0 5px;

    .header {
        background-color: $--border-level-3;
        text-align: center;
        vertical-align: middle;
        line-height: 40px;

        .title {
            font-size: 20px;
            color: $--color-primary;
        }
    }

    .toolbar {
        background-color: $--border-level-4;
        text-align: center;
        vertical-align: middle;
        line-height: 40px;
    }

    .main{
      height:100%;
      background-color:$--border-level-4;
      color: #000;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    .footer{
      background-color:$--border-level-4;
    }
}
</style>
